<template>
    <div class="count">
        <div class="topTit f f-a-c f-j-b">
            <div class="left f f-a-c">
                <img src="/src/status/img/logo.png" class="logo" alt="">
                <span>H.S.国际问题研究平台</span>
            </div>
            <div class="right">
                <img @click="setting" src="/src/status/img/geng.png" class="myStat" alt="">
            </div>
        </div>
        <div class="body">
            <!-- 这个是头部的航空航天 -->
            <div class="top f f-a-c f-j-b">
                <div @click="showBottom = true" class="lef f f-a-c">{{ title.name }} <img src="/src/status/img/1.png"
                        class="xiajian" alt=""></div>
                <!-- <img src="/src/status/img/2.png" class="shecl" @click="shecl" alt=""> -->
            </div>
            <!-- 下面的列表 -->
            <div class="list">
                <van-list offset="10" @load="onLoad">
                    <div v-for="(item, index) in listPage" class="listItem" :key="index">

                        <div class="title">{{ item.en_title }}</div>
                        <div class="time">{{ item.article_time }}</div>

                        <!-- 这个是下面的查看详情 -->
                        <div class="detile f f-a-c f-j-b">
                            <div @click="viewDetails(item)" class="viewDetails">查看详情</div>
                            <div @click="Detial(item)" class="detle f f-a-c"><img src="/src/status/img/3.png" class="detImg"
                                    alt="">删除</div>
                        </div>
                    </div>
                </van-list>
                <!-- 这个是搜索 -->
                <!-- <div class="search">
                    <input type="text" v-model="valu" placeholder="请输入关键词搜索" class="inp" name="" id="">
                    <div class="sousuoImg f f-a-c f-j-c"><img src="/src/status/img/4.png" class="schImg" alt=""></div>
                </div> -->
            </div>
        </div>
        <!-- 下面的弹出层 -->
        <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%', paddingBottom: '50px' }">
            <div class="listHuati">
                <div v-for="(item, index) in list" :key="index" @click="itemQie(item)" class="listName f f-a-c f-j-b"
                    :class="{ active: item.status == 1 }">
                    <div class="leftItem  f f-a-c">
                        <img src="/src/status/img/6.png" v-if="item.status == 0" class="jinghao" alt="">
                        <img src="/src/status/img/5.png" v-else class="jinghao" alt="">
                        {{ item.name }}
                    </div>
                    <div class="rigItem">
                        <img @click="detle(item)" src="/src/status/img/3.png" class="gengduo" alt="">
                    </div>
                </div>
                <div class="btn">创建话题</div>
            </div>
        </van-popup>
        <div v-if="porps" class="">
            <detilsPorop @detilStua="detilStua" :title="title" :ids="ids" :obj="objItem"></detilsPorop>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { showConfirmDialog, showToast, closeToast, showLoadingToast } from 'vant';
import router from '../../router';
import { CyTopics, TopicsList, ArticleListCai, DeleteArticle } from '../../api/index'
let ind = ref(1)
let porps = ref(false)
let valu = ref('')
let time = ref(null)
let title = ref({})
let list = ref([{ status: 0, id: 2 }, { status: 1, id: 3 }, { status: 0, id: 4 }, { status: 0, id: 5 }, { status: 0, id: 6 }, { status: 0, id: 6 }, { status: 0, id: 6 }, { status: 0, id: 6 }, { status: 0, id: 6 }])
let showBottom = ref(false)
let showFrom = ref(false)
let showTime = ref(false)//时间
let gaiValue = ref('')//输入概念
let categoryValue = ref('')//类别添加
let addressValue = ref('')//时间添加
let statTimeValue = ref('')//开始时间
let endTimeValue = ref('')//结束时间
let objItem = ref({})//这个是搜索关键字
let item = ref({})//时间status
let page = ref(0)//时间status
let ids = ref(0)//
let listPage = ref([])//时间status
// ------------------------------------时间----------------------------------------
const currentDate = ref(['2021', '01', '01']);
const minDate = new Date(1960, 1, 1)
const maxDate = +new Date(2025, 5, 1)

// 返回首页
onMounted(() => {
    console.log(router);
    list.value = []
    initList()
    setTimeout(() => {
        title.value.name = list.value[0].name
    }, 1000);
})
// 删除
const Detial = (item) => {
    console.log(ids, '00000');
    showConfirmDialog({
        title: '提示',
        message: '确认删除吗？',
    }).then(async (res) => {
        showLoadingToast({
            duration: 0,
            forbidClick: true,
            message: '删除中...',
        });
        let n = await DeleteArticle({ article_id: item.id })
        closeToast();
        showToast(n.msg)
        listPage.value = []
        page.value = 1
        caiInit(ids.value)
    }).catch((err) => {
        console.log(err, '12789');
        // on cancel
    });

}
// 获取话题
const initList = async () => {
    let n = await CyTopics()
    let lists = []
    n.content.topics_list.forEach(item => {
        lists.push({
            ...item,
            status: 0
        })
    })
    list.value = [...list.value, ...lists]
    list.value[0].status = 1
    title.value = list.value[0]
    // 这个是列表id[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[[]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]
    // caiInit(list.value[0].id)
    ids.value = list.value[0].id
}
// 采集列表----------------------------------------------
const caiInit = async (id) => {
    ids.value = id
    const toast = showLoadingToast({
        duration: 0,
        forbidClick: true,
        message: '加载中...',
    });
    let n = await ArticleListCai({
        page: page.value,
        pageSize: 10,
        topics_id: id
    })
    closeToast();
    listPage.value = [...listPage.value, ...n.content.list]
}
// 话题切换
const itemQie = (item) => {
    // console.log(item, '000000000000000000000000000000000000000000');
    ids.value = item.id
    list.value.forEach(item => {
        item.status = 0
    })
    item.status = 1
    showBottom.value = false
    title.value = item
    listPage.value = []
    caiInit(item.id)
}
// 子传父
const detilStua = () => {
    localStorage.removeItem('stuta')
    porps.value = false
}

// 点击查看 详情
const viewDetails = (item) => {
    // console.log(ids.value, '555555555555555555555555555');
    // localStorage.setItem('stuta', 1)
    objItem.value = item
    // porps.value = true
    router.push({
        path: '/EventDetails',
        query: {
            id: item.id,
            topics_id: ids.value
        }
    })
}

// 这个是删除
const detle = (item) => {
    showConfirmDialog({
        title: '标题',
        message:
            '删除之后对应的采集也会删除，确认要删除话题吗？',
    }).then(async () => {
        console.log('123');
        let n = await TopicsList({
            topics_id: item.id
        })
        showToast(n.msg)
        list.value = []
        initList()
        showBottom.value = false
        // on confirm
    }).catch(() => {
        // on cancel
    });
}
const setting = () => {
    router.push('/IndexMove')
}
// 这个是当list滑到最下面================================----------------------------------========================================================================--------------------------------
const onLoad = () => {

    // listPage.value = []
    clearTimeout(time)
    time = setTimeout(() => {
        page.value++
        caiInit(ids.value)
        console.log('11111');
    }, 100)
}
</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 3.75) * 1vw;
}

.botBtn {
    padding: 0 pxfn(15);

    .reset {
        width: 25%;
        height: pxfn(44);
        line-height: pxfn(44);
        background: #ffffff;
        border: pxfn(1) solid #e8eaef;
        border-radius: pxfn(6);
        text-align: center;
    }

    .schec {
        width: 72%;
        height: pxfn(44);
        line-height: pxfn(44);
        background: #32bbea;
        border-radius: pxfn(6);
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: center;
        color: #ffffff;
    }
}

.from {
    padding: pxfn(15);

    .top {
        margin-bottom: pxfn(15);

        .sort {
            height: pxfn(36);

            .lefs {
                width: pxfn(167);
                height: pxfn(36);
                line-height: pxfn(36);
                border: pxfn(1) solid #e8eaef;
                border-radius: pxfn(6);
                text-align: center;
            }

            .actLef {
                border: pxfn(1) solid #32BBEA;
                color: #32BBEA;
            }
        }

        .gaiInp {
            width: 100%;
            height: pxfn(36);
            border: pxfn(1) solid #e8eaef;
            border-radius: pxfn(6);
            padding-left: pxfn(10);
        }

        .xian {
            margin: 0 pxfn(5);
            color: #C2C5CC;
        }

        .gaiInp1 {
            width: 45%;
            height: pxfn(36);
            border: pxfn(1) solid #e8eaef;
            border-radius: pxfn(6);
            padding-left: pxfn(10);
        }




        .gai {
            font-size: pxfn(12);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: LEFT;
            color: #4e5769;
            margin-bottom: pxfn(10);
        }

        .gaiimg {
            width: pxfn(12);
            height: pxfn(12);
            margin-left: pxfn(4);
        }
    }
}

.gaiInp::placeholder {
    color: #C2C5CC !important;
}

.listName {
    width: 100%;
    height: pxfn(48);
    margin-top: pxfn(10);
    // background-color: #f0fafd;
    border-radius: pxfn(10);
    padding: pxfn(10);
    box-sizing: border-box;

    .gengduo {
        width: pxfn(16);
        height: pxfn(16);
        box-sizing: border-box;
    }

    .leftItem {
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 400;
        text-align: LEFT;
        // color: #1d2129;
        box-sizing: border-box;

        .jinghao {
            width: pxfn(18);
            height: pxfn(18);
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 600;
            text-align: LEFT;
            color: #1d2129;
            box-sizing: border-box;
            margin-right: pxfn(10);
        }
    }

}

.active {
    color: #32bbea !important;
    background-color: #f0fafd;
}

.listHuati {
    padding: 0 pxfn(20);
    position: relative;
    padding-bottom: pxfn(70);
    // height: pxfn(300);
    overflow-y: auto;

    .btn {
        position: fixed;
        bottom: pxfn(0);
        width: 90%;
        height: pxfn(42);
        line-height: pxfn(44);
        background: #fff;
        border: pxfn(1) solid #32bbea;
        border-radius: pxfn(8);
        left: 50%;
        transform: translateX(-50%);
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: center;
        color: #32bbea;
    }
}

// .search {
//     position: fixed;
//     bottom: 0;
//     left: 50%;
//     transform: translateX(-50%);
//     width: 95%;
//     height: pxfn(52);
//     background: #ffffff;
//     border-radius: pxfn(24);

//     .sousuoImg {
//         position: absolute;
//         width: pxfn(72);
//         height: pxfn(36);
//         background: #32bbea;
//         border-radius: pxfn(18);
//         top: 50%;
//         transform: translateY(-50%);
//         right: pxfn(15);

//         .schImg {
//             width: 16px;
//             height: 16px;
//         }
//     }

//     .inp {
//         border: none;
//         width: 100%;
//         height: 100%;
//         border-radius: pxfn(24);
//         padding-left: pxfn(15);
//     }
// }

.list {
    position: relative;
    height: calc(100vh - pxfn(115));
    width: 100%;
    // background-color: #fff;
    overflow-y: auto;
    padding-bottom: pxfn(50);

    .listItem {
        padding: pxfn(10);
        border-radius: pxfn(8);
        background-color: #fff;
        margin-bottom: pxfn(10);

        .detile {
            margin-top: pxfn(10);

            .viewDetails {
                font-size: pxfn(14);
                font-family: PingFang SC, PingFang SC-400;
                font-weight: 400;
                text-align: LEFT;
                color: #32bbea;
            }

            .detle {
                font-size: pxfn(14);
                font-family: PingFang SC, PingFang SC-400;
                font-weight: 400;
                text-align: LEFT;
                color: #868d9c;


                .detImg {
                    width: pxfn(18);
                    height: pxfn(18);
                    margin-right: pxfn(4);
                }
            }
        }

        .count {
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: LEFT;
            color: #4e5769;
            width: 100%;
            height: 100%;
            padding-top: pxfn(5);

            p {
                /* 原样打印且自动换行 */
                white-space: pre-wrap;

                /* 在父元素上设置该属性，子代元素能排列在同一水平上 */
                display: -webkit-box;

                /* 超出几行显示 */
                -webkit-line-clamp: 4;

                /* 子元素垂直排列 */
                -webkit-box-orient: vertical;

                /* 文本溢出部分显示三个点 */
                text-overflow: ellipsis;

                /* 超出隐藏 */
                overflow: hidden
            }

        }

        .time {
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: LEFT;
            color: #868d9c;
            margin: pxfn(10) 0;
        }

        .topt {
            font-size: pxfn(16);
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 600;
            text-align: LEFT;
            color: #1d2129;
        }

        .title {
            font-size: pxfn(16);
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 600;
            text-align: LEFT;
            color: #1d2129;
            margin-top: pxfn(5);
        }
    }
}

.body {
    height: calc(100vh - pxfn(48));
    background-color: #edf3fa;
    padding: pxfn(15);
    padding-top: 0;
    overflow-y: auto;

    .top {
        width: 100%;
        height: pxfn(50);

        .shecl {
            width: pxfn(22);
            height: pxfn(22);
        }

        .lef {
            font-size: pxfn(18);
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 600;
            text-align: LEFT;
            color: #1d2129;

            .xiajian {
                width: pxfn(15);
                height: pxfn(15);
                margin-left: pxfn(10);
            }
        }
    }
}



.count {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding-top: pxfn(50);
}

.topTit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: pxfn(48);
    border: 1px solid #edf3fa;
    padding: pxfn(15);
    z-index: 1;
    font-size: pxfn(14);
    font-weight: 600;

    .logo {
        width: pxfn(27);
        height: pxfn(24);
        margin-right: pxfn(10);
    }

    .myStat {
        width: pxfn(24);
        height: pxfn(24);
    }
}
</style>